<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script>
			function sclick() {
				var post = document.querySelector(".post");
				if (post.style.display == "block") {
					post.style.display = "none";
				} else {
					post.style.display = "block";
				}
			}

			function posttext(t) {
				//找到li的父节点ul
				var postList = document.querySelector("#postList");
				//ul的第一个子节点
				var li = postList.children[0];
				//复制第一个子节点，true表示子节点完全复制   包括子节点的子节点
				var newli = li.cloneNode(true);
				//找到发布的父节点
				var nodes = t.parentNode.children;
				//获取输入的标题
				var inputcont = nodes[0].value;
				//获取选择的选项
				var selcon = nodes[1].value;
				//获取文本框内容
				var textcon = nodes[2].value;
				//获取复制的li的子节点
				var newlis = newli.children;
				//第一个子节点是图片   根据selcon的内容判断使用哪副图片
				var img = newlis[0].firstElementChild;
				if (selcon == "电子书籍") {
					img.src = "images/tou01.jpg";
				}else if(selcon=="新课来了"){
					img.src = "images/tou02.jpg";
				}else if(selcon=="新手报道"){
					img.src = "images/tou03.jpg";
				}else{
					img.src = "images/tou03.jpg";
				}
				//设置标题为输入的标题
				 newlis[1].innerHTML=inputcont;
				 //设置
				newlis[2].firstElementChild.innerHTML="版块:"+selcon;
				newlis[2].lastElementChild.innerHTML="发表时间："+new Date().toLocaleString();
				postList.insertBefore(newli, li);
				var post = document.querySelector(".post");
				post.style.display="none";
			}
		</script>
	</head>
	<body>
		<div class="bbs">
			<header onclick="sclick()"><span>我要发帖</span></header>
			<section>
				<ul id="postList">
					<li>
						<div><img src="images/tou02.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>
					<li>
						<div>
							<img src="images/tou01.jpg">
						</div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			</section>

			<div class="post">
				<input class="title" placeholder="请输入标题（1-50个字符）">
				所属版块：<select>
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布" onclick="posttext(this)">
			</div>
		</div>
	</body>
</html>
